<template>
	<view class="SearchingList">
		<!-- <view class="SearchingList_top">
			<u-search :showAction="true" v-model='keywords' actionText="搜索" :actionStyle='hhh' :animation="true"
				@custom='api_index_get_goods_listFunSou'></u-search>
		</view> -->
		<app-title :text="title" titleBackground='rgba(0,0,0,0)' color='#fff'></app-title>
		<view class="SearchingList_box">
			<scroll-view v-if="gift === '15'" class="SearchingList_box_scrolls">
				<view class="home_box_item_goodss">
					<view class="home_box_item_goodss_item" v-for="(item,index) in list" :key="index"
						@click="goFun(`/pages/home/commodity_details/commodity_details?id=${item.id}`)">
						<view class="home_box_item_goodss_item_image">
							<image :src="item.thumb" mode=""></image>
						</view>
						<view class="home_box_item_goodss_item_details">
							<view class="home_box_item_goodss_item_title">
								{{item.title}}
							</view>
							<p> 消耗贡献积分：<span style="color: #FF6839;">{{item.qyjf?item.qyjf:'0.00'}}</span></p>
							<image class="dingwei_image" style="height: 44rpx;" src="@/static/home/renzhong.png"
								mode="heightFix"></image>
						</view>
					</view>
				</view>
			</scroll-view>
			<scroll-view :scroll-top="0" :scroll-y="true" class="SearchingList_box_scroll" @scrolltolower="lower"
				v-if="list.length !== 0 && gift !== '15'">
				<view class="home_box_item_goods">
					<view class="home_box_item_goods_item" v-for="(item,index) in list" :key="index"
						@click="goFun(`/pages/home/commodity_details/commodity_details?id=${item.id}`)">
						<view class="home_box_item_goods_item_image">
							<image :src="item.thumb" mode=""></image>
						</view>
						<view class="home_box_item_goods_item_details">
							<view class="home_box_item_goods_item_title">
								{{item.title}}
							</view>
							<!-- <p>销售:{{'1000'}}</p>
							<p>库存:{{'9999'}}</p> -->
							<p> 赠送绿色积分：{{item.lsjf?item.lsjf:'0.00'}}</p>
							<view class="home_box_item_goods_item_marketprice">
								{{item.marketprice}}
							</view>
						</view>
						<image class="dingwei_image" style="width: 120rpx;" src="@/static/home/goumai.png"
							mode="widthFix"></image>
					</view>
				</view>
			</scroll-view>

			<u-empty v-if="list.length === 0 && !gift" mode="search"
				icon="http://cdn.uviewui.com/uview/empty/search.png" />
			<u-empty v-if="list.length === 0 && gift" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
		</view>
	</view>
</template>

<script>
	import {
		api_index_get_goods_list
	} from '@/api/home.js'
	export default {
		data() {
			return {
				equipment: '',
				page: 1,
				gift: '',
				keywords: '',
				list: [],
				hhh: {
					color: "#fff"
				},
				title: ''

			};
		},
		watch: {
			keywords(a, b) {
				if (this.gift) {
					if (a.length === 0) {
						this.page = 1;
						this.list = []
						this.api_index_get_goods_listFun();
					}
				}

			}
		},
		onLoad(e) {
			console.log(e);
			this.list = []
			if (e.type !== "null") {
				console.log(e.type);
				this.gift = e.type;
				this.api_index_get_goods_listFun();
			}

			this.title = e.title;
			if (process.env.UNI_PLATFORM === 'h5') {
				// 在H5环境中打开
				console.log('在H5环境中打开');
				this.equipment = 'H5'
			} else if (process.env.UNI_PLATFORM === 'app-plus') {
				// 在App环境中打开
				console.log('在App环境中打开');
				this.equipment = 'App'
			}
		},
		methods: {
			goFun(url) {
				uni.navigateTo({
					url
				})
			},
			lower() {
				this.page++;
				this.api_index_get_goods_listFun();
			},
			async api_index_get_goods_listFunSou() {
				let up = {
					keywords: this.keywords,
					gift: this.gift
				}
				let data = await api_index_get_goods_list(up);
				this.list = data.list
			},
			async api_index_get_goods_listFun() {
				let up = {
					page: this.page,
					keywords: this.keywords,
					gift: this.gift
				}
				let data = await api_index_get_goods_list(up);
				if (data.error === 0) {
					data.list.forEach(item => {
						this.list.push(item)
					})
				} else {

				}

			},
		}
	}
</script>

<style lang="scss">
	.SearchingList {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		background-image: url('@/static/home/Rectangle.png');
		background-size: 100% calc(88rpx + var(--status-bar-height));
		background-repeat: no-repeat;

		// .SearchingList_top {
		// 	height: 380rpx;
		// 	padding: 80rpx 50rpx;
		// 	background-image: url('@/static/zhuanquTop.jpg');
		// 	background-size: 100%;
		// }

		.SearchingList_box {
			width: 100%;
			flex: 1;
			overflow: hidden;
			// background-color: #fff;
			// border-top-right-radius: 30rpx;
			// border-top-left-radius: 30rpx;

			// padding: 20rpx;
			.SearchingList_box_scroll {
				width: 100%;
				height: 100%;
				padding: 30rpx;
				box-sizing: border-box;


				.home_box_item_goods {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.home_box_item_goods_item {
						width: 100%;
						margin-bottom: 20rpx;
						height: 240rpx;
						display: flex;
						position: relative;

						.dingwei_image {
							position: absolute;
							right: 0;
							bottom: 20rpx;
						}

						.home_box_item_goods_item_image {
							width: 240rpx;
						}

						.home_box_item_goods_item_details {
							width: 370rpx;
							height: 100%;
							padding: 10rpx 20rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.home_box_item_goods_item_title {
								width: 100%;
								overflow: hidden;
								font-size: 28rpx;
								color: #000000;
								text-overflow: ellipsis;
								font-size: 30rpx;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical
							}

							p {
								font-size: 24rpx;
								color: #BBBBBB;
							}

							.home_box_item_goods_item_marketprice {
								width: 100%;
								// padding: 0 20rpx;
								color: #FF6839;
								font-size: 40rpx;
								// text-align: center;
							}
						}
					}
				}
			}


			.SearchingList_box_scrolls {
				width: 100%;
				height: 100%;
				// padding: 30rpx;
				box-sizing: border-box;

				.home_box_item_goodss {
					width: 100%;
					display: flex;
					padding: 28rpx;
					justify-content: space-between;

					.home_box_item_goodss_item {
						width: 48%;
						height: 452rpx;
						box-shadow: 0 0 20rpx #ccc;

						.home_box_item_goodss_item_image {
							width: 100%;
							height: 338rpx;


							image {
								width: 100%;
								height: 100%;
							}
						}

						.home_box_item_goodss_item_details {
							font-size: 22rpx;
							position: relative;
							padding: 0 20rpx;

							.home_box_item_goodss_item_title {
								font-size: 30rpx;
								width: 60%;
								text-overflow: ellipsis;
								overflow: hidden;
								text-wrap: nowrap;
							}

							p {
								margin-top: 30rpx;
							}

							.dingwei_image {
								position: absolute;
								right: 10rpx;
								top: 10rpx;
							}
						}
					}
				}







			}
		}
	}
</style>